var DeptAttendanceItem = function () {
  var template = /* html */ `
    <div class="dept-attendance-item" style="width:100%;height:100%">
      <div class="attendance-item-chart" style="width:100%;height:100%"></div>
    </div>
  `;

  return {
    props: {
      attendanceData: {
        type: Array,
        default: function () {
          return [];
        }
      }
    },

    watch: {
      attendanceData: function () {
        this.resetChart();
      }
    },

    data: function () {
      return {};
    },

    mounted: function () {
      this.showChart();

      var self = this;
      $(this.$el).find('.attendance-item-chart').resize(function () {
        var $chart = $(self.$el).find('.attendance-item-chart');
        var chart = echarts.getInstanceByDom($chart[0])
        if (chart !== undefined) {
          chart.resize();
        }
      });
    },

    methods: {
      getChart: function () {
        var $chart = $(this.$el).find('.attendance-item-chart');
        var chart = echarts.getInstanceByDom($chart[0]);
        if (chart === undefined) {
          chart = echarts.init($chart[0]);
        }
        return chart;
      },

      showChart: function () {
        var chart = this.getChart();
        var axisData = DeptAttendanceModel.getAxisData();
        var series = this.getSeries();

        var option = {
          color: window.boardChartColor,
          grid: {
            left: 60,
            right: 40,
            bottom: 30
          },
          legend: {
            type: 'scroll',
            top: 15,
            textStyle: {
              color: '#44D3E4',
              fontSize:16
            },
            pageTextStyle: {
              color: '#44D3E4',
              fontSize:16
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: axisData,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14
            }
          },
          yAxis: {
            type: 'value',
            min: series.length === 0 ? 0 : undefined,
            max: series.length === 0 ? 10 : undefined,
            name: '个/次',
            minInterval: 5,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14
            }
          },
          series: series
        };
        chart.setOption(option);
      },

      resetChart: function () {
        var $chart = $(this.$el).find('.attendance-item-chart');
        var chart = echarts.getInstanceByDom($chart[0]);
        if (chart === undefined) {
          this.showChart();
          return;
        }

        var series = this.getSeries();
        var option = {
          yAxis: {
            min: series.length === 0 ? 0 : undefined,
            max: series.length === 0 ? 10 : undefined
          },
          series: series
        };

        chart.setOption(option);
      },

      getSeries: function () {
        var attendanceData = this.attendanceData;
        var series = _.map(attendanceData, function (attendance) {
          var serieData = attendance.getChartSerieData();
          serieData.type = 'line';
          return serieData;
        });
        return series;
      }
    },

    template: template
  };
}();